<template>
  <div class="payment-registration-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="1" :tab="`待核销(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`已核销(${pageStat['2']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        :activeKey="activeKey"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
        :sort-config="{ remote: true }"
        @sort-change="sortChangeHandle"
      >
        <template #tool>
          <template v-if="activeKey === '1'">
            <a-button type="primary" @click="addPaymentWaterHandle">添加付款流水</a-button>
            <a-button type="primary" v-debounce @click="importPaymentWaterHandle">导入付款流水</a-button>
          </template>
          <!-- 全部 -->
          <a-button type="primary" v-debounce @click="exportHandle">批量导出</a-button>
        </template>
        <template #action="{ row }">
          <a-button type="link" @click="writeOffFeeHandle(row)">核销审批单</a-button>
          <a-button type="link" @click="deletePaymentWaterHandle(row)" danger>删除</a-button>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AddPaymentWater from "./components/addPaymentWater/index.vue";
import ImportWater from "./components/importWater/index.vue";
import WriteOffFee from "./components/writeOffFee/index.vue";
import TableHook from "@/hook/tableHook";
export default {
  name: "PaymentRegistration",
  components: {
    AddPaymentWater,
    ImportWater,
    WriteOffFee
  }
};
</script>
<script lang="ts" setup>
import { searchItemList } from "./data";
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const { tableHeight, loading } = TableHeightHook(110);
const { searchForm, tableData, tableRef, dialogOpts, drawerOpts, activeKey, pageStat, tableColumn } = InitHook();
const { searchHandle, getData, changeTabHandle, deletePaymentWaterHandle, writeOffFeeHandle, addPaymentWaterHandle, importPaymentWaterHandle, exportHandle } = OperationHook({
  activeKey,
  pageStat,
  searchForm,
  tableData,
  tableRef,
  dialogOpts,
  drawerOpts,
  loading
});
const { sortChangeHandle } = TableHook({ searchForm }, getData);
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});
searchHandle();
</script>
<style lang="stylus" scoped></style>
